<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="inline"
        :default-selected-keys="[menu_selected]"
        :default-open-keys="['primary', 'primary1']"
      >
        <template v-for="menu_level1 in menu_items">
          <!-- 一级菜单 -->
          <a-sub-menu v-if="menu_level1.children" :key="menu_level1.key">
            <span slot="title">
              <a-icon :type="menu_level1.icon" />
              <span>{{ menu_level1.title }}</span>
            </span>
            <template v-for="menu_level2 in menu_level1.children">
              <!-- 二级菜单 -->
              <a-sub-menu v-if="menu_level2.children" :key="menu_level2.key">
                <span slot="title">
                  <span>{{ menu_level2.title }}</span>
                </span>
                <template v-for="menu_level3 in menu_level2.children">
                  <!-- 三级菜单 -->
                  <a-sub-menu
                    v-if="menu_level3.children"
                    :key="menu_level3.key"
                  >
                    <span slot="title">
                      <span>{{ menu_level3.title }}</span>
                    </span>
                  </a-sub-menu>
                  <!-- 三级菜单项 -->
                  <a-menu-item
                    v-else
                    :key="menu_level3.key"
                    @click="click_menu(menu_level3)"
                  >
                    <span>{{ menu_level3.title }}</span>
                  </a-menu-item>
                </template>
              </a-sub-menu>
              <!-- 二级菜单项 -->
              <a-menu-item
                v-else
                :key="menu_level2.key"
                @click="click_menu(menu_level2)"
              >
                <span>{{ menu_level2.title }}</span>
              </a-menu-item>
            </template>
          </a-sub-menu>
          <!-- 一级菜单项 -->
          <a-menu-item
            v-else
            :key="menu_level1.key"
            @click="click_menu(menu_level1)"
          >
            <a-icon :type="menu_level1.icon" />
            <span>{{ menu_level1.title }}</span>
          </a-menu-item>
        </template>
      </a-menu>
    </a-layout-sider>

    <a-layout>
      <a-layout-header class="header" style="padding: 0">
        <div class="header-left">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
          <span> {{ sys_title }}</span>
        </div>
        <div class="header-right">
          <span class="header-msg">
            <a-dropdown class="avatar">
              <a-menu slot="overlay">
                <a-menu-item> 退出登录 </a-menu-item>
              </a-menu>
              <a-button style="border: 0">
                <a-space>
                  <a-avatar icon="user"> </a-avatar>
                  <span>用户名</span>
                </a-space>
              </a-button>
            </a-dropdown>
          </span>
        </div>
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: 'calc(100% - 160px)',
        }"
      >
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
      menu_items: [
        {
          key: "primary",
          icon: "user",
          title: "小学",
          path: "/primary",
          children: [
            {
              key: "primary1",
              title: "一年级",
              path: "/primary/1",
              children: [
                {
                  key: "primary1_1",
                  title: "一年级1班",
                  path: "/primary/1/1",
                },
                {
                  key: "primary1_2",
                  title: "一年级2班",
                  path: "/primary/1/2",
                },
              ],
            },
            {
              key: "primary2",
              title: "二年级",
              path: "/primary/2",
            },
          ],
        },
        {
          key: "junior",
          icon: "team",
          title: "初中",
          path: "/junior",
        },
      ],
      sys_title: "",
      menu_selected: "",
    };
  },
  created() {
    let pathname = window.document.location.pathname;
    while (pathname.length > 1 && pathname.endsWith("/")) {
      pathname = pathname.substr(0, pathname.length - 1);
    }
    // 遍历菜单项
    var menulist = [...this.menu_items];
    while (menulist.length > 0) {
      let menu_item = menulist.pop();
      // 当前项为子菜单
      if (menu_item.children) {
        menulist.push(...menu_item.children);
      }
      // 当前项为菜单项
      else {
        // 比对路径
        if (pathname == menu_item.path) {
          this.menu_selected = menu_item.key;
          this.sys_title = menu_item.title;
          return;
        }
      }
    }
  },
  methods: {
    click_menu(menu_item) {
      this.sys_title = menu_item.title;
      this.$router.replace(menu_item.path, null, () => {});
    },
  },
};
</script>

<style>
#components-layout-demo-custom-trigger {
  height: 100%;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-msg {
  padding-right: 24px;
}
</style>
